<template>
    <el-row class="row-bg" justify="space-between">
        <el-col :span="2">
            <div class="image">
            </div>
        </el-col>
        <el-col :span="4">
            <div class="user">
                <MaterialSymbolsMailOutline class="icon" />
                <MaterialSymbolsNotificationsOutline class="icon" />
                <div class="avatar"></div>
                <span>{{ userInfoState().user.userName }}</span>
                <MaterialSymbolsLogoutRounded class="icon" @click="logout" />
            </div>
        </el-col>
    </el-row>
</template>

<script setup lang="ts">
import { userInfoState } from "@/stores/store";
import MaterialSymbolsLogoutRounded from '~icons/material-symbols/logout-rounded'
import MaterialSymbolsNotificationsOutline from '~icons/material-symbols/notifications-outline'
import MaterialSymbolsMailOutline from '~icons/material-symbols/mail-outline'
import router from "@/router";


function logout() {

    ElMessageBox.confirm("确定退出登陆?", {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
    }).then(() => {
        userInfoState().removeUser();
        router.push("/login")
    }).catch(() => {
        ElMessage({
            type: 'info',
            message: '已取消',
        })
    })

}

</script>

<style lang="scss" scoped>
.row-bg {
    height: 100%;
    color: #606266;

    .image {
        box-sizing: border-box;
        height: 100%;
        width: 199px;
        padding-left: 10px;
        background-image: url("../assets/img/logo.png");
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }

    .user {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;

        .icon {
            margin-right: 10px;

            &:hover {
                color: black;
                cursor: pointer;
            }
        }

        .avatar {
            height: 45px;
            width: 45px;
            margin-right: 10px;
            margin-left: 30px;
            background-image: url("../assets/img/avator.png");
            background-size: cover;
        }

        span {
            margin-right: 10px;
        }


    }


}
</style>